import {designPage, reactive} from "plain-design-composition";
// @ts-ignore
import data from '../../../data/data-1.json';
import {DemoRow} from "../../Demo/DemoRow";
import {Adc, AdcGroup, AdcIndex, AntdTable, Checkbox, Form, FormItem, InputNumber, PlcIndex, Switch} from "../../../../packages";

export default designPage(() => {

  const state = reactive({
    data,
    destroy: false,
    summaryData: [
      {
        "id": 0,
        "color": "#79f285",
        "name": "Lisa",
        "date": "2002-04-28",
        "star": "★★★★★★★",
        "size": 49
      },
      {
        "id": 1,
        "color": "#f27990",
        "name": "George",
        "date": "2019-01-06",
        "star": "★★★★★★★★",
        "size": 74
      },
    ],
    other: {
      hasSummaryData: true,
      groupHead: false,
    },
    props: {
      headRowHeight: 45,
      bodyRowHeight: 40,
      border: false,
      virtual: false,
    },
    plc: {
      width: 200,
      align: 'left',
      init: true,
      hide: undefined,
    },
  });

  return () => (
    <div>
      <DemoRow title={'基本用法'}>
        <Form column={1}>
          <FormItem label="销毁表格">
            <Checkbox v-model={state.destroy} label={'销毁'}/>
          </FormItem>
          <FormItem label={'列宽度响应测试'}>
            <InputNumber v-model={state.plc.width} step={100}/>
          </FormItem>
          <FormItem label="表头行高">
            <InputNumber v-model={state.props.headRowHeight} step={5}/>
          </FormItem>
          <FormItem label="表体行高">
            <InputNumber v-model={state.props.bodyRowHeight} step={5}/>
          </FormItem>
          <FormItem label="列销毁测试(名称)">
            <Switch v-model={state.plc.init}/>
          </FormItem>
          <FormItem label="带边框">
            <Checkbox v-model={state.props.border}/>
          </FormItem>
          <FormItem label="合计行">
            <Switch v-model={state.other.hasSummaryData}/>
          </FormItem>
          <FormItem label="表头分组">
            <Switch v-model={state.other.groupHead}/>
          </FormItem>
          <FormItem label="启用虚拟滚动">
            <Switch v-model={state.props.virtual}/>
          </FormItem>
          {!!state.other.groupHead && <>
            <FormItem label="hide:(评分)">
              <Switch v-model={state.plc.hide}/>
            </FormItem>
          </>}
        </Form>
      </DemoRow>
      <DemoRow title={'作用域插槽'}>
        {!state.destroy &&
          <AntdTable
            showRows={10}
            key={state.other.groupHead ? '1' : '2'}
            dataSource={data}
            summaryDataSource={state.other.hasSummaryData ? state.summaryData : undefined}
            {...state.props}
            pagination={false}
          >

            {!!state.other.groupHead && <>
              <Adc title={'编号'}
                   dataIndex={'id'}
                   fixed={'left'}
                   width={state.plc.width}
                   render={{
                     /*@ts-ignore*/
                     head: ({ adc }) => (<span>id标题:{adc.props.title}</span>),
                     normal: ({ row }) => (<span>id:{row.id}</span>),
                     summary: ({ row }) => (<span>smy:{row.id}</span>),
                   }}
              />
              <Adc title={'编号'} dataIndex={'id'}/>
              <Adc title={'大小'} dataIndex={'size'}/>
              <AdcGroup title={'地址'} fixed={'left'}>
                <Adc dataIndex="date" title="日期"/>
                <Adc dataIndex="color" title="颜色"/>
              </AdcGroup>
              <Adc title={'编号'} dataIndex={'id'}/>
              <Adc title={'评分'} dataIndex={'star'}/>
              <Adc title={'地址'} dataIndex={'addr'}/>

              {state.plc.init && <Adc title={'名称'} dataIndex={'name'}/>}
              <AdcGroup title={'站点'} fixed={'right'}>
                <Adc dataIndex={'url'} title={'链接'}/>
                <Adc dataIndex={'domain'} title={'域名'}/>
              </AdcGroup>

              <Adc title="协议" dataIndex="protocol"/>
              <Adc title="邮箱" dataIndex="email"/>
              <Adc title="ip" dataIndex="ip"/>
            </>}
            {!state.other.groupHead && <>
              <AdcIndex/>
              <Adc dataIndex="id" title="编号" fixed={'left'}/>
              <Adc
                dataIndex="size"
                title="大小"
                render={{
                  /*@ts-ignore*/
                  head: ({ adc }) => (<span>id标题:{adc.props.title}</span>),
                  normal: ({ row }) => (<span>id:{row.id}</span>),
                  summary: ({ row }) => (<span>smy:{row.id}</span>),
                }}
              />
              <Adc dataIndex="date" title="日期"/>
              <Adc dataIndex="color" title="颜色"/>
              {!!state.plc.init && <Adc dataIndex="name" title="名称" fixed={'right'}/>}
              <Adc dataIndex="star" title="评分"/>
              <Adc dataIndex="addr" title="地址"/>
              <Adc dataIndex="url" title="链接"/>
              <Adc dataIndex="domain" title="域名"/>
              <Adc dataIndex="protocol" title="协议"/>
              <Adc dataIndex="email" title="邮箱"/>
              <Adc dataIndex="ip" title="ip"/>
            </>}
          </AntdTable>}
      </DemoRow>
    </div>
  );
});
